<script setup lang="ts">
import { ref, reactive, h } from "vue";
import { getListApi, deleteApi, closeApi, unCloseApi } from "/@/api/mes/work-order";
import { useModal } from '/@/hooks/useModal'
import { useTableNotCheck, useDeleteSucessMessage, useConfirm, useWarningMessage, useSuccessMessage } from '/@/hooks/useMessage'
import { dataFormatter } from '/@/utils/data'

// 表格配置
const tableRef = ref<YTableInstance>();
const tableProps = reactive<YTableProps>({
  height: "auto",
  columns: [
    { field: "code", label: "工单编号", filter: true },
    { field: "productId", label: "产品", formatter: (v) => dataFormatter(v, 'Product') },
    { field: "planStartDate", label: "计划开始", formatter: 'date' },
    { field: "quantity", label: "数量" },
    { field: "createTime", label: "创建时间", formatter: 'dateTime' },
    { field: "createUser", label: "创建人" },
    { field: "updateTime", label: "更新时间", formatter: 'dateTime' },
    { field: "updateUser", label: "更新人" },
    { field: "isAudited", label: "审核", formatter: 'bool' },
    { field: "auditTime", label: "审核时间", formatter: 'dateTime' },
    { field: "auditUser", label: "审核人" },
    { field: "isClosed", label: "结案", formatter: 'bool' },
    { field: "closeUser", label: "结案人" },
    { field: "closeTime", label: "结案时间", formatter: 'dateTime' },
  ],
  remoteConfig: {
    api: getListApi,
    immediate: true,
    params: {
      isClosed: false,
      isAudited: void 0
    }
  },
  filters: [
    {
      label: '审核状态', field: 'isAudited',
      component: {
        key: 'SelectMaker',
        props: {
          options: [
            { label: '全部', value: void 0 },
            { label: '未审核', value: false },
            { label: '已审核', value: true },
          ],
          onChange: () => tableRef.value.loadData()
        }
      }
    },
    {
      label: '结案状态', field: 'isClosed',
      component: {
        key: 'SelectMaker',
        props: {
          options: [
            { label: '全部', value: void 0 },
            { label: '未结案', value: false },
            { label: '已结案', value: true },
          ],
          onChange: () => {
            tableRef.value.loadData()
          }
        }
      }
    }
  ],
  operas: [
    {
      title: '新增',
      type: 'primary',
      onClick: () => viewModal.open({ title: '新增', contentProps: { id: void 0 } })
    },
    {
      title: '修改', onClick: () => {
        handEdit()
      }
    },
    {
      title: '删除', onClick: async () => {
        const rows = await tableRef.value.getCheckRecords(true)
        await useConfirm('warning', '确认删除选中的工单吗？')

        deleteApi(rows.map(s => s.id).join()).then(({ succeeded }) => {
          if (succeeded) {
            useDeleteSucessMessage()
            tableRef.value.loadData()
          }
        })
      }
    },
    {
      title: '结案',
      more: true,
      onClick: async () => {
        const rows = await tableRef.value.getCheckRecords(true)
        if (rows.length > 1) {
          return useWarningMessage('只能选择单个工单')
        }

        const row = rows[0]

        if (row.isClosed) {
          return useWarningMessage('已结案')
        }
        await useConfirm('warning', '确认结案选中的工单吗？')
        const { succeeded } = await closeApi(row.id)
        if (succeeded) {
          useSuccessMessage('结案成功')
          tableRef.value.loadData()

        }
      }
    },
    {
      title: '取消结案',
      more: true,
      onClick: async () => {
        const rows = await tableRef.value.getCheckRecords(true)
        if (rows.length > 1) {
          return useWarningMessage('只能选择单个工单')
        }
        const row = rows[0]

        if (!row.isClosed) {
          return useWarningMessage('未结案')
        }
        await useConfirm('warning', '确认取消结案选中的工单吗？')
        const { succeeded } = await unCloseApi(row.id)
        if (succeeded) {
          useSuccessMessage('取消结案成功')
          tableRef.value.loadData()

        }
      }
    }
  ],
  onCellClick: () => {
    tableRef.value.updateOperas()
  }
});

// 编辑窗口
const isChange = ref(false)
const viewModal = useModal({
  title: '新增',
  width: 1000,
  height: 300,
  content: () => import('./view.vue'),
  contentOn: {
    onChange: () => (isChange.value = true)
  },
});

viewModal.on('open', () => {
  isChange.value = false
})
viewModal.on('close', () => {
  if (isChange.value) {
    tableRef.value.loadData()
  }
})

const handEdit = ({ row }: any = {}) => {

  let id: number;
  if (!row) {
    const selects = tableRef.value.vxe().getCheckboxRecords()
    if (!selects.length)
      return useTableNotCheck()

    id = selects[0].id
  } else {
    id = row.id
  }

  viewModal.open({
    title: '修改', contentProps: { id }
  })
}

</script>
<template>
  <IndexLayout>
    <YTable v-bind="tableProps" ref="tableRef" @row-dbl-click="handEdit"></YTable>
  </IndexLayout>
</template>